<template>
  <div class="header">
    <div class="l-content">
      <el-button size="small" @click="handleClose()">
        <Menu class="icons"></Menu>
      </el-button>
    </div>
    <div class="r-content">
      <div class="user">
        <span>学号：</span>
        <span class="user-name">{{ userInfo.student_id }}</span>
        <span>姓名：</span>
        <span class="user-name">{{ userInfo.name }}</span>
        <span>专业：</span>
        <span class="user-name">{{ userInfo.major }}</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <img :src="avatarSrc" class="user-img" />
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleUpdate()">修改密码</el-dropdown-item>
              <el-dropdown-item @click="handleLogout()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAllDataStore } from '../stores'
import { ElMessage } from 'element-plus'
import api from '../axios/api'
import multiavatar from '@multiavatar/multiavatar'

const router = useRouter()
const store = useAllDataStore()

interface UserInfo {
  student_id: string
  name: string
  grade: string
  major: string
}

const userInfo = ref<UserInfo>({
  student_id: localStorage.getItem('studentId')?.toString() || '未登录',
  name: '靓仔',
  grade: '还未获取课表',
  major: '还未获取课表',
})

const avatarSrc = computed(() => {
  return `data:image/svg+xml;utf8,${encodeURIComponent(
    multiavatar(localStorage.getItem('token') || '')
  )}`
})

const updateUserInfo = () => {
  const storedInfo = localStorage.getItem('userInfo') || ''
  if (storedInfo) {
    userInfo.value = JSON.parse(storedInfo)
  }
}

// 添加设备检测函数
const checkDevice = () => {
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
  if (isMobile) {
    ElMessage.error('请使用PC访问本平台')
    router.push('/unsupported')
  }
}
// 添加验证用户函数
const verifyUser = async () => {
  const res = await api.verifyUser()
  console.log(res)
  if (res.status !== 200) {
    ElMessage.error('验证失败，请重新登录')
    handleLogout()
    throw new Error('验证失败，请重新登录')
  }
}

onMounted(() => {
  checkDevice() // 添加设备检测
  updateUserInfo()
  // verifyUser()
  window.addEventListener('localStorageChange', (event: any) => {
    if (event.detail.key === 'userInfo') {
      userInfo.value = event.detail.value
    }
  })
})

onUnmounted(() => {
  window.removeEventListener('localStorageChange', () => {})
})
const handleClose = (): void => {
  store.state.isCollapse = !store.state.isCollapse
}

const handleLogout = (): void => {
  localStorage.clear()
  const store = useAllDataStore()
  store.state.studentId = ''
  store.state.studentPw = ''
  router.push('/login')
}

const handleUpdate = (): void => {
  router.push('/changePassword')
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  /*background-color: #333;*/
}

.l-content {
  display: flex;
  align-items: center;
  .icons {
    width: 20px;
    height: 20px;
  }
  .el-button {
    margin-right: 20px;
  }
}
.r-content {
  .user {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    line-height: 30px;
    color: #fff;
    margin: 6px 6px 6px 0px;

    .date {
      margin-right: 20px;
    }

    .user-name {
      margin-right: 20px;
      font-size: 14px;
      text-align: center;
    }
  }

  .user-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
}
</style>
